<template>
    <div class="patsearch-container">
      <!-- 导航栏 -->
      <div class="tab-bar">
        <el-button 
          v-for="tab in tabs"
          :key="tab.key"
          @click="selectTab(tab.key)"
          :class="{ 'active': selectedTab === tab.key }"
        >
          {{ tab.title }}
        </el-button>
      </div>
      <!-- 内容区域 -->
      <div class="content">
        <component :is="currentComponent" />
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, computed } from 'vue'; // 确保导入 computed
  import NowHosp from '../home/patsearch/NowHosp.vue';  // 在院患者组件
  import InHosp from '../home/patsearch/InHosp.vue';    // 出院患者组件
  import OutHosp from '../home/patsearch/OutHosp.vue';  // 门诊患者组件
  
  // 导航标签配置
  const tabs = [
    { key: 'now', title: '在院患者' },
    { key: 'in', title: '出院患者' },
    { key: 'out', title: '门诊患者' },
  ];
  
  // 当前选中的标签
  const selectedTab = ref('now');
  
  // 根据标签选择对应的组件
  const currentComponent = computed(() => {
    switch (selectedTab.value) {
      case 'now': return NowHosp;
      case 'in': return InHosp;
      case 'out': return OutHosp;
      default: return NowHosp;
    }
  });
  
  // 切换标签的方法
  const selectTab = (key) => {
    selectedTab.value = key;
  };
  </script>
  
  <style scoped>
  .patsearch-container {
    padding: 20px;
  }
  
  .tab-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
  }
  
  .tab-bar .el-button {
    padding: 12px 20px;
    background-color: #f5f7fa;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .tab-bar .el-button.active {
    background-color: #409EFF;
    color: white;
    border-color: #409EFF;
  }
  
  .content {
    padding: 20px;
    background-color: white;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
  }
  </style>